<template>
    <view>
        <view class="smart-page-head">
            <view class="smart-page-head-title">text 文本编辑</view>
        </view>
        
        <view>
            <view class="text-box">
                <text>{{text}}</text>
            </view>
            <button type="primary" @click="add()">添加行</button>
            <button type="warn" @click="del()">删除行</button>
        </view>
        
    </view>
</template>

<script>
    export default{
        data(){
            return{
                texts:[
                    'hbulider 400万开发者',
                    'uni-app跨平台',
                    'smartUI自定义框架'
                ],
                extraLine:[],
                text:'guilin travel\n'
            }
        },
        methods:{
            /* 添加行的函数*/
            add(){
                console.log('add.....');
                this.extraLine.push(this.texts[this.extraLine.length%3]);
                this.text=this.extraLine.join('\n');
            },
            /* 删除行的函数*/
            del(){
                console.log('del.....');
                this.extraLine.pop();
                this.text=this.extraLine.join('\n');
            }
        }
    }
</script>

<style>

.text-box{
    background-color: #ccc9ca;
    min-height: 200upx;
    margin-bottom:40upx ;
    padding: 40upx 0;
    text-align: center;
}
</style>
